<template>
  <view class="indexItem" @click="viewInfo(item.id)">
    <image class="img" :src="item.image" mode="aspectFill" />
    <view class="info">
      <view class="info-title"> {{ item.brand }} </view>
      <view class="info-discount">
        <!-- 优惠{{ (Number(item.original) - Number(item.price)).toFixed(2) }}元 -->
        会员优惠{{ (Number(item.original) - Number(item.price)).toFixed(2) }}元
      </view>
      <view class="info-desc"> {{ item.name }} </view>
      <view class="info-bottom">
        <view class="nums">
          <view class="nums-top">
            <view class="cur"> {{ item.price }} </view>
            <view class="old"> {{ item.original }} </view>
          </view>
          <view class="nums-bottom"> 已售：{{ item.num }} </view>
        </view>
        <view class="btn"> 立即购买 </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: ["item"],
  data() {
    return {};
  },
  methods: {
    viewInfo(id) {
      this.$emit("viewInfo", id);
    },
  },
};
</script>
<style lang="scss" scoped>
.indexItem {
  width: 100%;
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding: 25rpx 30rpx;
  @include flex;
  margin-bottom: 15rpx;
  .img {
    width: 210rpx;
    height: 210rpx;
    margin-right: 50rpx;
  }
  .info {
    width: calc(100% - 260rpx);
    font-size: 26rpx;
    &-title {
      font-weight: bold;
    }
    &-desc {
      // line-height: 50rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 8rpx 0 12rpx 0;
    }
    &-discount {
      color: #cd8544;
      font-weight: bold;
    }
    &-vip {
      color: #cd8544;
      font-weight: bold;
      margin-top: 15rpx;
    }
    &-bottom {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .nums {
        &-top {
          display: flex;
          align-items: flex-end;
          .cur {
            font-size: 40rpx;
          }
          .old {
            font-size: 26rpx;
            padding: 0 10rpx;
            text-decoration: line-through;
          }
        }
        &-bottom {
          font-size: 20rpx;
        }
      }
      .btn {
        width: 138rpx;
        line-height: 42rpx;
        background: #cd8544;
        border-radius: 19rpx;
        text-align: center;
        color: #ffffff;
        font-size: 24rpx;
      }
    }
  }
}
</style>
